<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
    <link rel="stylesheet" href="./Bootstrap/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./index.css">
    <title>注册</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            color: #333;
            font-size: 12px;
        }
        a{
            text-decoration: none;
        }
        em{
            font-style: normal;
        }
        #container1{
            width: 100%;
            height: 100%;
        }
        #container1 .top_bar{
            width: 100%;
            min-width: 1200px;
            background-color: #f1f1f1;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        /* 导航1 */
        .top_content{
            width: 1200px;
            margin: 0 auto;
        }
        .top_content ul li{
            border: 1px solid transparent;
            position: relative;
            z-index: 9999;
        }
        .top_content ul li a{
            padding: 0 12px;
            color: #525252;
            font-size: 12px;
            line-height: 29px;
            border-right: 1px solid #d9d9d9;
        }
        .top_content ul.top_content_l li:nth-of-type(2n) a{
            border-right: none;
        }
        .top_content ul li a i{
            color: #dc2a49;
            font-size: 15px;
            margin-right: 3px;
            display: inline-block;
            height: 16px;
            line-height: 14px;
        }
        .top_content ul li a span{
            color: #a1a0a7;
            font-size: 13px;
            margin-left: 2px;
            display: inline-block;
            line-height: 14px;
        }
        .top_content ul.top_content_l{
            float: left;
        }
        .top_content ul.top_content_r{
            float: right;
        }
        .top_content_l li{
            float: left;
        }
        .top_content_r li{
            float: left;
        }
        /* 下拉框 */
        .top_drowdown{
            display: none;
            border: 1px solid #d9d9d9;
            border-top-color: transparent;
            background-color: white;
            position: absolute;
            top: 28px;
            left: -1px;
        }
        .top_drowdown1 .top_drowdown_top{
            text-align: center;
            width: 122px;
            height: 145px;
            border-bottom: 1px solid #e0e0e0;
            padding: 16px 14px;
            color: #666;
            line-height: 35px;
        }
        .top_drowdown1 .top_drowdown_top img{
            width: 122px;
            height: 122px;
        }
        .top_content ul li.top_hover:hover{
            border: 1px solid #d9d9d9;
            border-bottom-color: transparent;
            background-color: white;
        }
        .top_content ul li:hover a{
            color: #f60;
            border-right-color: transparent;
        }
        .top_content ul li:hover a span{
        transform: rotate(180deg);
        }
        .top_content ul.top_content_l li.cursor:hover a{
            color: #525252;
            cursor: text;
        }
        .top_content ul li.top_drowdown1_box:hover .top_drowdown1{
            display: block;
        }
        .top_content ul li.top_drowdown2_box:hover .top_drowdown2{
            display: block;
        }
        .top_content ul li.top_drowdown3_box:hover .top_drowdown3{
            display: block;
        }
        .top_content ul li.top_drowdown3_box .top_drowdown3 .collect_info p:hover{
            color: #f60;
        }
        .top_content ul li.top_drowdown4_box:hover .top_drowdown4{
            display: block;
        }
        .top_content ul li.top_drowdown4_box .top_drowdown4 .collect1_info p:hover{
            color: #f60;
        }
        .top_drowdown2{
            width: 100%;
        }
        .top_drowdown2 p{
            line-height: 29px;
            text-align: center;
            color: #888;
            font-size: 12px;
        }
        .top_drowdown2 p:hover{
            color: #f60;
            cursor: pointer;
        }
        .top_drowdown3{
            display: none;
            width: 145px;
            padding: 0 15px;
            text-align: left;
            position: absolute;
            border: 1px solid #d9d9d9;
            background-color: white;
            border-top-color: transparent;
            left: -1px;
        }
        .top_drowdown3 p.collect,.top_drowdown4 p.collect1{
            line-height: 24px;
            font-size: 12px;
            font-weight: bold;
        }
        .top_drowdown3 .collect_info p,.top_drowdown4 .collect1_info p{
            line-height: 24px;
            font-size: 12px;
            color: #707070;
            cursor: pointer;
        }
        .top_drowdown4{
            display: none;
            width: 276px;
            padding: 0 15px;
            position: absolute;
            right: -1px;
            border: 1px solid #d9d9d9;
            background-color: white;
            border-top-color: transparent;
            text-align: left;
        }
        /* 导航2 */
        .top_nav{
            width: 100%;
            min-width: 1200px;
            padding: 10px 0;
            background-color: white;
        }
        .nav_header{
            width: 1200px;
            margin: 0 auto;
        }
        .pic1{
            margin-top: 12px;
            width: 208px;
            height: 80px;
        }
        .pic1 img{
            width: 100%;
            height: 100%;
        }
        .pic2{
            margin-top: 12px;
            padding: 15px 30px 15px 20px;
            width: 210px;
            height: 50px;
            font-size: 24px;
            line-height: 50px;
        }
        .pic3{
            width: 192px;
            padding: 12px 0 18px 50px;
            line-height: 25px;
            position: relative;
        }
        .pic3 i{
            position: absolute;
            font-size: 35px;
            top: 26px;
            left: 5px;
        }
        .pic3 p.service_p{
            font-size: 14px;
            color: #666;
            text-align: left;
        }
        .pic3 p.tell_p{
            font-size: 26px;
            text-align: left;
            color: #e02445;
        }
        .footer_box{
            width: 100%;
            min-width: 1200px;
            background-color: #1b1b1b;
            padding: 40px 0;
            margin-top: 20px;
        }
        .footer_info{
            width: 1000px;
            margin: 0 auto;
        }
        
        .footer_info_c{
            margin-right: 110px;
            display: inline-block;
            vertical-align: top;
            line-height: 26px;
        }
        .footer_info_pic{
            display: inline-block;
            vertical-align: top;
            padding: 0 0 10px 75px;
            line-height: 26px;
            border-left: 1px #2f2f2f solid;
        }
        .footer_info_pic h4{
            font-size: 16px;
            color: #ddd;
            font-weight: normal;
        }
        .footer_info_pic p.footer_info_webkit{
            color: #a0a0a0;
        }
        .footer_info_bottom{
            text-align: center;
            line-height: 36px;
            color: #575757;
        }
        .footer_info_bottom_nav{
            height: 24px;
            line-height: 24px;
            padding-top: 6px;
        }
        .footer_info_bottom_nav a{
            color: #575757;
            padding: 0 17px;
            border-right: 1px solid #575757;
        }
        .footer_info_bottom_nav a:hover{
            color: #9f9f9f;
        }
        .footer_info_bottom_nav a.footer_border{
            border-right: none;
        }
        .footer_info_bottom_nav a.footer_ico i{
            background-image: url("./images/精灵图.png");
            vertical-align: middle;
            display: inline-block;
            width: 18px;
            height: 18px;
        }
        .footer_info_bottom_nav a.footer_ico i.qq{
            background-position: 0 0;
        }
        .footer_info_bottom_nav a.footer_ico i.wb{
            background-position: 0 -18px;
        }
        .footer_info_bottom_copy .footer_bianhao a{
            color: #575757;
        }
        .footer_info_bottom_copy .footer_bianhao a:hover{
            color: #9f9f9f;
        }
        .footer_info_bottom_copy .footer_beian{
            color: #575757;
            margin-left: 3px;
        }
        .footer_friend{
            height: 31px;
            padding-top: 10px;
        }
        .footer_friend i{
            display: inline-block;
            height: 31px;
            background-image: url("./images/footer精灵图.png");
            margin-right: 2px;
            opacity: 0.6;
        }
        .footer_friend i.footer_friend_1{
            width: 88px;
            background-position: 0 0;
        }
        .footer_friend i.footer_friend_2{
            width: 87px;
            background-position: -92px 0;
        }
        .footer_friend i.footer_friend_3{
            width: 87px;
            background-position: -182px 0;
        }
        .footer_friend i.footer_friend_4{
            width: 107px;
            background-position: -272px 0;
        }
        .footer_friend i.footer_friend_5{
            width: 88px;
            background-position: -383px 0;
        }
        .footer_friend i.footer_friend_6{
            width: 95px;
            background-position: -474px 0;
        }
        .footer_friend i:hover{
            opacity: 1;
        }
        .footer_friend_r:hover{
            opacity: 1;
        }
        .footer_friend_r{
            display: inline-block;
            width: 88px;
            height: 31px;
            background-image: url("./images/电子营业执照.png");
            margin-right: 2px;
            opacity: 0.6;
        }
        /* 内容 */
        .content_box{
            width: 100%;
            min-width: 1100px;
            background-color: #f8f8f8;
        }
        .content_box_info{
            width: 1000px;
            margin: 50px auto;
            background-color: white;
            padding-top: 20px;
        }
        .content_box_title{
            width: 1110px;
            margin: 0 auto;
            padding-top: 60px;
            text-align: center;
        }
        .content_bg{
            width: 100%;
            height: 20px;
            margin: 20px auto;
            background-image: url("./images/rg_line.png");
            background-position: center top;
        }
        #show_step{
            width: 100%;
            height: 30px;
        }
        #show_step dd{
            float: left;
            width: 370px;
            line-height: 30px;
            text-align: center;
        }
        .on{
            color: #e02445;
        }
        label,input,.input_info{
            display: inline-block;
        }
        label{
            width: 219px;
            height: 37px;
            color: #4d4d4d;
            line-height: 37px;
            text-align: right;
        }
        .input_info{
            width: 515px;
            font-size: 12px;
            margin-left: 11px;
            line-height: 37px;
            color: #999;
        }
        .form-group{
            width: 765px;
            margin: 20px auto;
        }
        form{
            font-size: 14px;
        }
        .btn_box{
            width: 100%;
            border-top: 1px solid #e7e7e7;
            height: 85px;
            line-height: 85px;
            text-align: center;
        }
        .btn_down{
            padding: 10px 90px;
            background-color: #999;
            /* #e02445 */
            color: #fff;
            font-size: 16px;
            border-radius: 3px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="container1">
        <!-- 导航1 -->
        <div class="top_bar">
            <div class="top_content layui-clear">
                <ul class="top_content_l layui-clear">
                    <li class="top_drowdown1_box top_hover">
                        <a href=""><i class="layui-icon layui-icon-cellphone"></i>手机站
                            <span class="layui-icon layui-icon-down"></span>
                        </a>
                        <div class="top_drowdown1 top_drowdown">
                            <div class="top_drowdown_top">
                                <img src="./images/手机站1.jpg" alt="">
                                <p>手机站</p>
                            </div>
                            <div class="top_drowdown_top">
                                <img src="./images/手机站2.jpg" alt="">
                                <p>小程序</p>
                            </div>
                        </div>
                    </li>
                    <li class="cursor"><a href="">欢迎来到企汇网</a></li>
                    <li><a href=""><i class="layui-icon layui-icon-username"></i>登录</a></li>
                    <li><a href="">免费注册</a></li>
                </ul>
                <ul class="top_content_r">
                    <li><a href="">企汇网首页</a></li>
                    <li class="top_hover top_drowdown2_box">
                        <a href="">收藏夹<span class="layui-icon layui-icon-down"></span></a>
                        <div class="top_drowdown2 top_drowdown">
                            <p>收藏的产品</p>
                            <p>收藏的店铺</p>
                        </div>
                    </li>
                    <li class="top_hover top_drowdown2_box">
                        <a href="">我是采购商<span class="layui-icon layui-icon-down"></span></a>
                        <div class="top_drowdown2 top_drowdown">
                            <p>采购商中心</p>
                            <p>发布采购单</p>
                            <p>采购管理</p>
                        </div>
                    </li>
                    <li class="top_hover top_drowdown2_box">
                        <a href="">我是供应商<span class="layui-icon layui-icon-down"></span></a>
                        <div class="top_drowdown2 top_drowdown">
                            <p>供应商中心</p>
                            <p>发布产品</p>
                            <p>产品管理</p>
                            <p>店铺管理</p>
                        </div>
                    </li>
                    <li><a href="">企汇管家</a></li>
                    <li class="top_hover top_drowdown3_box">
                        <a href="">企汇服务<span class="layui-icon layui-icon-down"></span></a>
                        <div class="top_drowdown3 top_drowdown">
                            <p class="collect">特色服务</p>
                            <div class="layui-clear">
                                <div class="collect_info" style="float: left;margin-right: 5px;">
                                    <p>标王</p>
                                    <p>热门推荐广告位</p>
                                    <p>信息包</p>
                                    <p>金铺装修</p>
                                </div>
                                <div class="collect_info" style="float: left;">
                                    <p>黄金展位</p>
                                    <p>图片空间</p>
                                    <p>企汇金铺</p>
                                    <p>更多服务</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="top_hover top_drowdown2_box">
                        <a href="" title="客服中心">客服中心<span class="layui-icon layui-icon-down"></span></a>
                        <div class="top_drowdown2 top_drowdown">
                            <p>收藏的产品</p>
                            <p>收藏的店铺</p>
                        </div>
                    </li>
                    <li class="top_hover top_drowdown4_box">
                        <a href="" title="网站导航"><i class="layui-icon layui-icon-app"></i>网站导航
                            <span class="layui-icon layui-icon-down"></span>
                        </a>
                        <div class="top_drowdown4 top_drowdown4">
                            <div style="border-bottom: 1px solid #ededed;padding: 10px 0;">
                                <p class="collect1">收藏的产品</p>
                                <div class="layui-clear">
                                    <div class="collect1_info" style="float: left;margin-right: 10px;">
                                        <p>首页</p>
                                        <p>产品库</p>
                                        <p>百度爱采购</p>
                                    </div>
                                    <div class="collect1_info" style="float: left;margin-right: 10px;">
                                        <p>企汇管家</p>
                                        <p>手机站</p>
                                        <p>企业直通车</p>
                                    </div>
                                    <div class="collect1_info" style="float: left;margin-right: 10px;">
                                        <p>企汇云信</p>
                                        <p>搜索</p>
                                    </div>
                                    <div class="collect1_info" style="float: left;">
                                        <p>企业库</p>
                                        <p>企汇软文通</p>
                                    </div>
                                </div>
                            </div>
                            <div style="border-bottom: 1px solid #ededed;padding: 10px 0;">
                                <p class="collect1">采购服务</p>
                                <div class="layui-clear">
                                    <div class="collect1_info" style="float: left;margin-right: 10px;">
                                        <p>采购中心</p>
                                    </div>
                                    <div class="collect1_info" style="float: left;margin-right: 10px;">
                                        <p>发布采购单</p>
                                    </div>
                                </div>
                            </div>
                            <div style="padding: 10px 0;">
                                <p class="collect1">行业市场</p>
                                <div class="layui-clear">
                                    <div class="collect1_info" style="float: left;margin-right: 10px;">
                                        <p>建材频道</p>
                                    </div>
                                    <div class="collect1_info" style="float: left;margin-right: 10px;">
                                        <p>机械频道</p>
                                    </div>
                                    <div class="collect1_info" style="float: left;margin-right: 10px;">
                                        <p>农林频道</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 导航2 -->
        <div class="top_nav">
            <div class="nav_header layui-clear">
                <div class="left pic1"><img src="./images/logo.png" alt="" title="企汇网"></div>
                <div class="left pic2">会员注册</div>
                <div class="right pic3">
                    <i class="layui-icon layui-icon-cellphone"></i>
                    <p class="service_p">客服电话</p>
                    <p class="tell_p">400-6677-369</p>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="content_box">
            <div class="content_box_title">
                <dl id="show_step" class="layui-clear">
                    <dd class="on">验证手机号</dd>
                    <dd>填写账号信息</dd>
                    <dd>注册成功</dd>
                </dl>
                <div class="content_bg"></div>
            </div>
            <div class="content_box_info">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="firstname" class=""><span class="on">*</span>请输入手机号</label>
                        <div class="input_info">
                            <input type="text" class="form-control" id="firstname"  placeholder="请输入手机号" style="width: 290px;height: 37px;padding-left: 10px;">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class=""><span class="on">*</span>验证码</label>
                        <div class="input_info">
                            <input type="text" class="form-control" id="lastname" placeholder="点击按钮进行验证" style="width: 298px;height: 37px;padding-left: 10px;">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class=""><span class="on">*</span>短信验证码</label>
                        <div class="input_info">
                            <input type="text" class="form-control" id="lastname" placeholder="请输入验证码" style="width: 162px;height: 37px;padding-left: 10px;">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="">
                            <label></label>
                            <div class="checkbox input_info">
                                <input class="agree" id="agree_btn" type="checkbox" style="margin-right: 10px;">我已阅读并同意<span class="on">《企汇网服务条款》</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group btn_box">
                        <div class="">
                            <button type="submit" class="btn btn-default btn_down">下一步</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer_box">
            <div class="footer_info">
                <ul class="footer_info_bottom">
                    <li class="footer_info_bottom_nav">
                        <a href="">网站首页</a>
                        <a href="">关于我们</a>
                        <a href="">联系我们</a>
                        <a href="">使用协议</a>
                        <a href="">版权隐私</a>
                        <a href="">维权通道</a>
                        <a href="">网站导航</a>
                        <a class="footer_border" href="">用户反馈</a>
                    </li>
                    <li class="footer_info_bottom_nav">
                        客服咨询热线：400-6677-369(免长途费) 工作时间：900-18:00(周一至周五)
                        <a class="footer_ico footer_border" href="" style="margin-left: 0;">
                            <span>在线客服：</span>
                            <i class="qq"></i>
                        </a>
                        <a class="footer_ico footer_border" href="" style="margin-left: 0;">
                            <span>关注我们：</span>
                            <i class="wb"></i>
                        </a>
                    </li>
                    <li class="footer_info_bottom_copy">
                        Copyright 2008-2018 &nbsp;河南企汇网信息技术股份有限公司  &nbsp;保留所有权利   &nbsp; <span style="color: #9f9f9f;">经营许可证编号：</span>
                        <span class="footer_bianhao"><a href="">豫B2-20140075</a></span>
                        <span class="footer_beian" style="color: #404040;">豫公网安备 41019702002055号</span>
                    </li>
                    <li class="footer_friend">
                        <i class="footer_friend_1"></i>
                        <i class="footer_friend_2"></i>
                        <i class="footer_friend_3"></i>
                        <i class="footer_friend_4"></i>
                        <i class="footer_friend_5"></i>
                        <i class="footer_friend_6"></i>
                        <a class="footer_friend_r" href=""></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script src="./layui-v2.6.8/layui/layui.js"></script>
<script src="./Bootstrap/bootstrap-3.4.1-dist/js/jquery-3.5.1.js"></script>
<script src="./Bootstrap/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script>
    var agree = document.querySelector("#agree_btn");
    var btnDown = document.querySelector(".btn_down");
    var s = 0;
    // agree.onclick = function qw() {
    //     s = s + 1;
    //     if (s % 2 == 0) {
    //         btnDown.style.backgroundColor = "#999";
    //     }else{
    //         btnDown.style.backgroundColor = "#e02445";
    //     }
    // }
    function we() {
        if (agree.checked  == true) {
            btnDown.style.backgroundColor = "#e02445";
        }else{
            btnDown.style.backgroundColor = "#999";
        }
    }
    window.onload = function () {
        // qw();
        agree.onclick = function () {
            we();
        }
        we();
    }
    // agree.checked
</script>
</html>